<template>
    <view class="notice page pd-30">
      <view
        class="msgList flex mt-20"
        v-for="(item, index) in msgList"
        :key="index"
      >
        <text class="ft c-99">{{ item.time }}</text>
        <view class="card pd-20  mt-20">
          <view>
            <view class="ft1">{{ item.title }}</view>
            <view class="ft mt-12 c-99"> {{ item.des }}</view>
          </view>
          <view class="btn mt-20 flex-center" @click="goDetail">
            <text class="ft mr-12">{{ "查看详情" }}</text>
            <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
          </view>
        </view>
        
      </view>
  
      <view class="btnGroup">
        <view class="btn1 flex-eve">
          <view class="allClear flex-center" @click="show=true">{{ "一键清空" }}</view>
          <view class="noRead flex-center">{{ "一键清除已读" }}</view>
        </view>
      </view>
      <up-modal width="518rpx" @confirm="confirm" @cancel="cancel"  contentTextAlign="center" :show="show" :title="title"  :showCancelButton="true" :content='content'></up-modal>
    </view>
  </template>
  
  <script lang="js" setup>
  import { ref, reactive } from "vue";
  
  const msgList =ref([
      {time:"2024-11-06 17:00",title:"优惠活动通知",des:'购物商城年终活动来袭！超多优惠商品，精彩互动游戏，丰厚奖品等你。快来畅享购物盛宴，迎接新一年。'},
      {time:"2024-11-06 17:00",title:"优惠活动通知",des:'购物商城年终活动来袭！超多优惠商品，精彩互动游戏，丰厚奖品等你。快来畅享购物盛宴，迎接新一年。'},
      {time:"2024-11-06 17:00",title:"优惠活动通知",des:'购物商城年终活动来袭！超多优惠商品，精彩互动游戏，丰厚奖品等你。快来畅享购物盛宴，迎接新一年。'},
      {time:"2024-11-06 17:00",title:"优惠活动通知",des:'购物商城年终活动来袭！超多优惠商品，精彩互动游戏，丰厚奖品等你。快来畅享购物盛宴，迎接新一年。'},
      {time:"2024-11-06 17:00",title:"优惠活动通知",des:'购物商城年终活动来袭！超多优惠商品，精彩互动游戏，丰厚奖品等你。快来畅享购物盛宴，迎接新一年。'},
    
  ])
  
  const show=ref(false)
  const title = ref('一键清空');  
  const content = ref('确定要一键清空所有消息吗？'); 
  const confirm=()=>{
      show.value=false
      
  }
  const cancel =()=>{
      show.value=false
  }
  const goDetail=()=>{
      uni.navigateTo({
      url: "/subpackage/message/preferentialDetail",
    });
  }
  </script>
  <style lang="scss" scoped>
  .msgList {
    flex-direction: column;
    justify-content: center;
    .card {
        width: 690rpx;
height: 244rpx;
background: #F8F8F8;
border-radius: 40rpx 40rpx 40rpx 40rpx;
position: relative;
    }
    .btn {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
      width: 170rpx;
      height: 54rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  
    
  }
  
  .btnGroup {
      width: 750rpx;
      height: 186rpx;
      position: fixed;
      left: 0;
      bottom: 0;
      background: #f8f8f8;
      .btn1 {
          //border: 2rpx solid red;
        width: 750rpx;
        height: 118rpx;
        background: #f8f8f8;
        .allClear {
          width: 196rpx;
          height: 78rpx;
          background: #ffffff;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
        .noRead {
          width: 454rpx;
          height: 78rpx;
          background: #333333;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #dbf046;
        }
      }
    }
  </style>
  